<template>
    <section class="biu">
        <header class="header">
            <div class="left">
                <router-link to='/'></router-link>
            </div>
            <div class="center">Biuban！</div>
            <div class="right"><input type="button" value="重置"></div>
        </header>
        <section class="condition" >
            <div class="location" :class="{'play':status  ,'noplay':status1 == 1}" @click="isshow(1)">地点  </div>
            <div class="topic" :class="{'play':status ,'noplay':status1 == 2}" @click="isshow(2)">主题  </div>
            <div class="time" :class="{'play':status ,'noplay':status1 == 3}" @click="isshow(3)">时间  </div>
        </section>
        <footer class="footer">
            <ul>
                <li v-for='msg in messages'  >
                    <router-link to=''>
                        <div class="title"><span>一起去旅行</span></div>
                        <div class="img"><img :src="msg.img" alt="头像"></div>
                        <div class="time">
                            <p>{{msg.location}}</p>
                            <p>{{msg.time}}</p>
                        </div>
                        <div class="info">{{msg.info}}</div>
                    </router-link>
                </li>
            </ul>
        </footer>

        <div class="fix">
            <router-link to='/'>
                <div class="img">
                    <img src="../../assets/feeds/head.png">
                </div>
                <div class="msg">
                    <span>发布</span>
                    <i>biu伴!</i>
                </div>
            </router-link>
        </div>

        <div class="one" v-if="status1==1">
            <div class="search">
                <input type="text" placeholder="搜索地点">
                <input type="button" value="取消" @click='cancel'>
            </div>
            <div class="content" >
                <h3>热门地点</h3>
                <ul>
                    <li v-for="n in 16">
                        <router-link to=''>
                            <div class="count">765</div>
                        </router-link>
                        <div>英国</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="two" v-if="status1==2">
            <ul>
                <li>全部</li>
                <li>一起去旅行</li>
                <li>陪我看电影</li>
                <li>走！去探店</li>
                <li>过节需要仪式感</li>
                <li>约个饭吧</li>
                <li>看展才是正经事</li>
                <li>其他活动</li>
                <li>约你去看剧</li>
            </ul>
        </div>
        <div class="three" v-if="status1==3">
            <ul>
                <li>全部</li>
                <li>本周末</li>
                <li>一周内</li>
                <li>一个月内</li>
                <li>七月</li>
                <li>八月</li>
                <li>九月</li>
                <li>九月之后</li>
            </ul>
        </div>
    </section>


</template>

<script type="text/javascript">

    export default {
        name:'feeds',
        methods:{
            isshow(n){
               if(this.status1 == n){
                    this.status1 = 0;
               }else{
                    this.status1 = n
               }
            },
            cancel(){
                this.status1 = false;
            }
        },
        data(){
            return {
                status:true,
                status1:0,
                images:[
                    "../../assets/feeds/b1.png",
                    '../../assets/feeds/b2.png',
                    '../../assets/feeds/b3.png',
                    '../../assets/feeds/b4.png',
                    '../../assets/feeds/b5.png',
                    '../../assets/feeds/b6.png',
                    '../../assets/feeds/b7.png',
                    '../../assets/feeds/b8.png',
                ],
                messages:[
                    {
                        img:require('../../assets/feeds/200.jpg'),
                        location:'古巴',
                        time:'10月3日-10月11日',
                        info:'国庆结伴 国庆节上海出发古巴，中转俄罗斯，中转时间较长，可以去莫斯科玩一圈，在古',
                    },
                    {
                        img:require('../../assets/feeds/200.jpg'),
                        location:'新疆 · 新疆',
                        time:'5月22日-6月18日',
                        info:'一起去新疆，新疆全境，男女不限，人数不限，费用AA，兰州或者乌鲁木齐会面，有烦心',
                    },
                    {
                        img:require('../../assets/feeds/200.jpg'),
                        location:'德国 · 法国 · 瑞士 · 意大利',
                        time:'5月31日-6月11日',
                        info:'5月31日德法意瑞一价全含12日游（本人已报名） 因小伙伴与自己的行程时间不能吻',
                    },
                    {
                        img:require('../../assets/feeds/200.jpg'),
                        location:'摩洛哥',
                        time:'7月13日-7月31日',
                        info:'90后女生会开车会拍照会p图开朗热情摩洛哥半月约伴 本人90后 女 会开车会拍照',
                    },
                ]
            }
        },

    }
</script>


<style type="text/css" lang="less">
.biu{
    .header{
        display: flex;
        justify-content: space-around;
        &>div{
            width: 5em;
            height: 4em;
            line-height: 4em;
        }
        .left{
            a{  display: block;
                width: 5em;
                height: 4em;
                background-image: url(../../assets/feeds/logo.png);
                background-repeat: no-repeat;
                background-position: center;
                background-size: contain;
            }
        }
        .center{
            font-weight: 900;
            font-style: italic;
        }
        .right{
            input{
                padding:0 1em;
                border-radius: 0.5em;
                border:none;
                outline: none;
                padding: 0.2em 2em;

            }
        }
    }
    .condition{
        .play{
            width: 3.5em;
            background-image: url(../../assets/feeds/三角下.png);
            background-repeat: no-repeat;
            background-position: center right;

        }
        .noplay{
            width: 3.5em;
            background-image: url(../../assets/feeds/三角上.png);
            background-repeat: no-repeat;
            background-position: center right;
        }
        margin-top: 0.5em;
        display: flex;
        justify-content: space-around;
        padding-bottom: 0.5em;
        border-bottom:0.02em solid gray;
    }
    .footer{
        ul{
            list-style-type: none;
            float:left;
            padding: 0;
            margin:1em 1em;

            li{
                display: inline-block;
                margin-right:1em;
                width:42vw;
                height: 30vh;
                border-radius: .15rem;
                margin-bottom: .18rem;
                overflow: hidden;
                position: relative;
                background-color: #e6e6e6;

                a{
                    display: inline-block;
                    width: 100%;
                    height: 30vh;
                    text-decoration: none;
                    text-align:center;
                    // color:#fff;
                    position: relative;
                    .title{
                        text-align: center;
                        color:orange;
                        margin:1em 0;
                        span{
                            background: #fff;
                            border-radius:10px;
                            padding: 0.2em 1em;
                        }
                    }
                    .img{
                        width: 20px;
                        height: 20px;
                        text-align:center;
                        margin:auto;
                        img{
                            width: 100%;
                            border-radius:10px;
                        }
                    }
                    .time{
                        font-size: 12px;
                    }
                    .info{
                        margin-bottom: 0;
                        font-size: 12px;
                        text-align:left;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp:2;
                        -webkit-box-orient:vertical;
                    }

                }
            }
        }
    }
    .one{
        position: absolute;
        top:0;
        left:0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        z-index: 100;
        .search{
            margin: 1em auto;
            display: flex;
            justify-content: center;
            input:first-child{
                text-indent: 2em;
                background-image:url(../../assets/feeds/搜索.png);
                background-repeat: no-repeat;
                background-position: center left 0.5em;
                border:1px solid gray;
                border-radius:10px;
                width: 80%;
                padding: 0.5em 0;
                outline: none;
            }
            input:last-child{
                border:none;
                background:#fff;
                outline: none;
            }
        }
        .content{
            h3{
                line-height: .6rem;
                opacity: .4;
                border-bottom: 1px solid rgba(0,0,0,0.2);
                padding: 1em 0;
                margin-left: 1em;
            }
            ul{

                list-style-type: none;
                padding: 0;
                width: 96vw;
                margin:auto;
                li{
                    float:left;
                    width: 4em;
                    height: 4em;
                    margin:2em 1em;
                    &>div{
                        text-align:center;
                        margin-top: 0.5em;
                    }
                    a{
                        display: block;
                        width: 4em;
                        height: 4em;
                        border-radius:2em;
                        text-decoration:none;
                        color:#FFF;
                        font-weight: 800;
                        background-image: url(../../assets/feeds/120.jpg);
                        background-repeat: no-repeat;
                        background-position: center;
                        .count{
                            text-align:center;
                            line-height: 4em;
                            border-radius:2em;
                            background-image: linear-gradient(90deg, rgb(30, 166, 255) 0%, rgb(79, 232, 231) 100%);
                            opacity: 0.8;
                        }
                    }
                }
            }
        }
    }
    .two,.three{
        ul{
            position: absolute;
            left:0;
            right:0;
            z-index:100;
            list-style-type: none;
            padding: 0;
            background: hsla(0,0%,100%,.9);
            height: 40vh;
            overflow-y: auto;
            li{
                width: 100%;
                text-align:center;
                padding: 0.5em 0;
                color:black;
                font-weight: 800;
                font-size: 20px;
            }
            li:first-child{
                color: #ff168f;
            }


        }
    }
    .fix {
        position: fixed;
        bottom: 1em;
        left:50%;
        width: 200px;
        height: 60px;
        margin-left: -100px;
        border-radius:40px;
        border:1px solid red;
        text-align:center;
        background-image: linear-gradient(90deg,#ff7e32,#ff00a3);
        a{
            text-decoration:none;
            display: inline-block;
            width: 200px;
            height: 60px;
            border-radius:40px;
            display: flex;
            justify-content: space-around;
            .msg{
                line-height: 60px;
                font-weight: 800;
                font-size: 20px;
            }

        }
    }
}



</style>
